<template>
  <div class="index">
    <!-- 头部导航栏 ----------------------------------------->
    <div class="header">
      <module-header :head_index="nav_index_index"/>
    </div>
    <!---->
    <!-- 轮播图 ----------------------------------------->
    <div class="banner">
      <el-carousel indicator-position="none" height="440px" loop>
        <el-carousel-item v-for="(val,item) in banner" :key="item" >
          <el-image
            style="width: 100%; height: 100%"
            :src="val.path"
            fit="fill" @click="toCarousel(val)"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- thImg ----------------------------------------->
    <module-line title="商品分类" english="Product category"/>
    <div class="index_classify flex-layout justify-evenly align-center" >
      <el-card shadow="hover" v-for="(val, item) in classifyIcon" :key="item"
               :body-style="{paddingLeft:'40px',paddingRight:'40px',background:val.c_sort,color:'white',fontWeight:'bold',fontStyle:'italic',fontSize:'20px'}" >
        <div @click="toClassification(val)">
          {{ val.c_name }}[{{ val.c_img.split('/')[0] }}]
        </div>
      </el-card>
    </div>
    <module-line title="维动" english="veidoorn"/>
    <div class="veidoorn_view">
      <el-row :gutter="10">
        <el-col :span="4">
          <h3 class="color-black" style="border-top: 1px solid black;border-left: 1px solid black;padding-top: 10px">
            维动篮球</h3>
          <div class="color-black pad-10" style="font-style: italic;box-sizing: border-box">[veidoorn]</div>
          <div style="height: 180px;border-bottom: 1px solid black;border-right: 1px solid black" class="fs-10">
            <div style="height: 120px">
              <i class="el-icon-s-help fs-25 color-yellow"></i>维动宝可梦篮球<br>
              [宝可梦官方联名篮球]
            </div>
            <div class="bg-blue fs-20 color-white" style="padding: 0 20px">新品推荐<i
              class="el-icon-caret-right color-red"></i></div>
          </div>
        </el-col>
        <el-col :span="5" v-for="(val,item) in veidoornInfo" :key="item">
          <div class="height-per-100 grid-content radius-10 " style="vertical-align: bottom" @click="toDetails(val)">
            <img :src="require('@/assets/img/basketball/' + val.cs_img)" class="width-per-100 "
                 style="height: 254px; border: 1px solid black">
          </div>
        </el-col>
      </el-row>
    </div>
    <module-line title="李宁" english="lining"/>
    <div class="lining_view">
      <el-carousel :interval="4000" type="card" height="400px" indicator-position="none">
        <el-carousel-item v-for="(val, item) in liningInfo" :key="item">
          <div class="" @click="toDetails(val)">
            <img :src="require('@/assets/img/basketball/' + val.cs_img)" class="height-per-100 ">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <module-line title="摩腾" english="molten"/>
    <div class="molten_view">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(val,item) in moltenInfo" :key="item" v-if="item!=1">
          <div class="grid-content radius-10 bg-blue" style="padding:2px;vertical-align: bottom"
               @click="toDetails(val)">
            <img :src="require('@/assets/img/basketball/' + val.cs_img)" class="width-per-100 height-per-100 radius-10">
          </div>
        </el-col>
      </el-row>
    </div>
    <module-line title="威尔胜" english="wilson"/>
    <div class="wilson_view">
      <el-row :gutter="10">
        <el-col :span="6" v-for="(val, item) in wilsonInfo" :key="item">
          <img :src="require('@/assets/img/basketball/' + val.cs_img)" class="width-per-100 height-per-100"
               style="border: 1px solid black" @click="toDetails(val)">
        </el-col>
      </el-row>
    </div>
    <module-line title="斯伯丁" english="Spalding"/>
    <div class="Spalding_view">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(val,item) in SpaldingInfo" :key="item">
          <div class="height-per-100 grid-content radius-10 " style="vertical-align: bottom" @click="toDetails(val)">
            <img :src="require('@/assets/img/basketball/' + val.cs_img)" style="height: 254px; border: 1px solid black">
          </div>
        </el-col>
      </el-row>
    </div>
    <module-line title="" english=""/>
  </div>
</template>

<script>
import moduleHeader from '../components/Common/Header'
import moduleLine from '../components/Common/ModuleLine'

export default {
  name: 'Index',
  components: {
    moduleHeader, // 导入头部组件
    moduleLine // 标题
  },
  data () {
    return {
      nav_index_index: 1, // 定义导航栏中首页的索引
      banner: [
        {
          path: require('@/assets/img/basketball/banner1.jpg'),
          SpaldingInfo: [],
          no: 0
        },
        {
          path: require('@/assets/img/basketball/banner2.jpg'),
          moltenInfo: [],
          no: 1
        },
        {
          path: require('@/assets/img/basketball/banner3.jpg'),
          wilsonInfo: [],
          no: 2
        }
      ], // 设置轮播图的图片
      carousel: [],
      classifyIcon: [], // 存储分类的品牌
      liningInfo: [], // 存储李宁图片的信息
      moltenInfo: [], // 魔腾
      SpaldingInfo: [], // 斯伯丁
      veidoornInfo: [], // 维动
      wilsonInfo: [] // 威尔胜
    }
  },
  mounted () {
    // 获取分类的数据
    if (this.$store.state.vuex_user_comm_sort_Info.length === 0) {
      this.$axios.get('/comm/getInfo').then(resp => {
        console.log(resp.data)
        this.$store.state.vuex_user_comm_sort_Info = resp.data.data
        this.classifyIcon = this.$store.state.vuex_user_comm_sort_Info
        console.log(this.classifyIcon)
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.classifyIcon = this.$store.state.vuex_user_comm_sort_Info
    }
    // 获取维动数据
    if (this.$store.state.vuex_veidoorn.length === 0) {
      this.$axios.get('/commSort/getBy', {
        params: {
          c_no: 'C202207180001'
        }
      }).then(resp => {
        console.log('查询类型', resp)
        this.$store.state.vuex_veidoorn = resp.data.data
        this.veidoornInfo = this.$store.state.vuex_veidoorn
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.veidoornInfo = this.$store.state.vuex_veidoorn
    }
    // 获取李宁数据
    if (this.$store.state.vuex_veidoorn.length === 0) {
      this.$axios.get('/commSort/getBy', {
        params: {
          c_no: 'C202207260002'
        }
      }).then(resp => {
        console.log('查询类型', resp)
        this.$store.state.vuex_lining = resp.data.data
        this.liningInfo = this.$store.state.vuex_lining
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.liningInfo = this.$store.state.vuex_lining
    }
    // 获取魔腾数据
    if (this.$store.state.vuex_molten.length === 0) {
      this.$axios.get('/commSort/getBy', {
        params: {
          c_no: 'C202207260001'
        }
      }).then(resp => {
        console.log('查询类型', resp)
        this.$store.state.vuex_molten = resp.data.data
        this.moltenInfo = this.$store.state.vuex_molten
        this.banner[1].moltenInfo = this.$store.state.vuex_molten
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.moltenInfo = this.$store.state.vuex_molten
    }
    // 获取斯伯丁数据
    if (this.$store.state.vuex_Spalding.length === 0) {
      this.$axios.get('/commSort/getBy', {
        params: {
          c_no: 'C202207190001'
        }
      }).then(resp => {
        console.log('查询类型', resp)
        this.$store.state.vuex_Spalding = resp.data.data
        this.SpaldingInfo = this.$store.state.vuex_Spalding
        this.banner[0].SpaldingInfo = this.$store.state.vuex_Spalding
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.SpaldingInfo = this.$store.state.vuex_Spalding
    }
    // 获取威尔胜数据
    if (this.$store.state.vuex_wilson.length === 0) {
      this.$axios.get('/commSort/getBy', {
        params: {
          c_no: 'C202207180002'
        }
      }).then(resp => {
        console.log('查询类型', resp)
        this.$store.state.vuex_wilson = resp.data.data
        this.wilsonInfo = this.$store.state.vuex_wilson
        this.banner[2].wilsonInfo = this.$store.state.vuex_wilson
      }).catch(err => {
        console.log(err)
      })
    } else {
      this.wilsonInfo = this.$store.state.vuex_wilson
    }
    // 获取地址信息
    this.$axios.get('/address/select').then(response => {
      console.log(response)
      this.$store.state.vuex_user_address_Info = response.data.data
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    toDetails (obj) {
      console.log(obj)
      this.$store.state.vuex_user_see_comm_Info = obj
      this.$store.state.vuex_user_comm = true // 判断用户是否在查看商品详情
      if (this.$store.state.vuex_user_comm) {
        this.$router.push('/details')
      }
    },
    toCarousel (obj) { // 轮播图
      console.log(obj)
      obj.SpaldingInfo = this.SpaldingInfo
      obj.wilsonInfo = this.wilsonInfo
      obj.moltenInfo = this.moltenInfo
      if (obj.no === 0) {
        this.$store.state.vuex_user_see_comm_Info = obj.SpaldingInfo[1]
      } else if (obj.no === 1) {
        this.$store.state.vuex_user_see_comm_Info = obj.moltenInfo[1]
      } else if (obj.no === 2) {
        this.$store.state.vuex_user_see_comm_Info = obj.wilsonInfo[1]
      }
      this.$store.state.vuex_user_comm = true
      if (this.$store.state.vuex_user_comm) {
        this.$router.push('/details')
      }
    },
    toClassification (obj) { // 商品分类
      if (obj.c_no === 'C202207180001') { // 维动
        this.$store.state.vuex_user_see_comm_Info = this.veidoornInfo[0]
      } else if (obj.c_no === 'C202207180002') { // 威尔胜
        this.$store.state.vuex_user_see_comm_Info = this.wilsonInfo[0]
      } else if (obj.c_no === 'C202207190001') { // 斯伯丁
        this.$store.state.vuex_user_see_comm_Info = this.SpaldingInfo[0]
      } else if (obj.c_no === 'C202207260002') { // 李宁
        this.$store.state.vuex_user_see_comm_Info = this.liningInfo[0]
      } else if (obj.c_no === 'C202207260001') { // 魔腾
        this.$store.state.vuex_user_see_comm_Info = this.moltenInfo[0]
      }
      this.$store.state.vuex_user_comm = true
      if (this.$store.state.vuex_user_comm) {
        this.$router.push('/details')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.newsCYBox {
  width: 32%;
  height: 48%;
  /*background: blue;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: column;
  padding-bottom: 30px;
}

.newsCY {
  width: 73%;
  margin: 0 auto;
  height: 940px;
  /*background: red;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.topLine {
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bottomLine {
  height: 50%;
  display: flex;
  justify-content: space-evenly;
  justify-items: center;
  box-sizing: border-box;
  padding: 0 200px;
  font-size: 15px;
  font-weight: 500;
}

.header {
  width: 100%;
  height: 95px;
  /*background: red;*/
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2501;
  background: white;
  border-bottom: 1px solid gainsboro;
}

.newsBox {
  width: 75%;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /*background: red;*/
  margin: 0 auto;
}

.line {
  width: 55%;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.thImg {
  width: 100%;
  height: 340px;
  position: relative;
  background: white;
}

.thBg {
  background: white;
  width: 55%;
  height: 370px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, -30px);
  z-index: 2500;
}

.thImgBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: url('~@/assets/img/bg.jpg') repeat-x;

  background-position: bottom;
}

.thImgBoxBor {
  width: 31%;
  height: 91%;
  /*background: red;*/
}

.banner {
  margin-top: 80px;
  width: 100%;
  height: 440px;
  background: red;
}

.index {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /*background: blue;*/

}

.index_classify {
  width: 75%;
  height: 50px;
  /*background: red;*/
  margin: 30px auto;
  margin-bottom: 50px;
}

.lining_view {
  width: 65%;
  height: 400px;
  background: #1cbbb4;
  margin: 0 auto;
  margin-bottom: 30px;
  border-top: 1px solid #1cbbb4;
  border-bottom: 1px solid #1cbbb4;
  border-radius: 10px;
}

.molten_view {
  width: 70%;
  height: 460px;
  /*background: #0081ff;*/
  margin: 0 auto;
  margin-bottom: 30px;
  /*border-top: 1px solid #0081ff;*/
  /*border-bottom:1px solid #0081ff;*/
  border-radius: 10px;
}

.Spalding_view {
  width: 70%;
  height: 253px;
  /*background: #0081ff;*/
  margin: 0 auto;
  margin-bottom: 50px;
  /*border-top: 1px solid #0081ff;*/
  /*border-bottom:1px solid #0081ff;*/
  border-radius: 10px;
}

.veidoorn_view {
  width: 70%;
  height: 273px;
  /*background: #0081ff;*/
  margin: 0 auto;
  margin-bottom: 50px;
  /*border-top: 1px solid #0081ff;*/
  /*border-bottom:1px solid #0081ff;*/
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}

.wilson_view {
  width: 70%;
  height: 270px;
  /*background: #0081ff;*/
  margin: 0 auto;
  margin-bottom: 50px;
  /*border-top: 1px solid #0081ff;*/
  /*border-bottom:1px solid #0081ff;*/
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}

/*element ui的样式*/
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

/** {*/
/*  !*overflow-y: hidden*!*/
/*  padding: 0;*/
/*  margin: 0;*/
/*}*/
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

input {
  outline: none;
  border: none;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #8292a8;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
